<template>
  <div class="nv-news-inner">
    <div class="community-box">
      <div class="mod-user">
        <div class="mod-user-avatar">
          <img
          v-if="info.userInfo"
            :src="info.userInfo.faceUrl"
            mode="aspectFill"
          />
        </div>
        <dl class="mod-user-info">
          <dt class="mod-user-name" v-if="info.userInfo">{{info.userInfo.nickName}}</dt>
          <dd class="mod-user-txt">
            <span class="count-col">{{info.shortTime}}</span
            ><span class="count-col">属地{{info.ipAddress}}</span>
          </dd>
        </dl>
        <!-- disabled 已关注-->
        <div class="mod-user-btn" v-if="info.isLike">+关注</div>
        <div class="mod-user-btn disabled" v-else>已关注</div>
      </div>
      <div class="community-span">
        <div class="ellipsis-container">
          <div role="realBox" class="ellipsis-real-box">
            <span>{{info.content}}</span
            >
          </div>
        </div>
      </div>
      <div class="community-listbox">
        <div class="community-imgboxes"  v-for="(imgUrl,index) in info.imgList" :key="index">
          <img
            :src="imgUrl.thumbImg"
            mode="aspectFill"
          />
        </div>
      </div>
      <div class="cm-counter">
        <span class="cm-counter-col">8评论</span
        ><span class="cm-counter-col">26阅读</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'VueJiangduoduoComDynamicItem',
  props: {
    info: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {};
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="scss" scoped>
.nv-news-inner {
  position: relative;
  text-al &::before {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    content: "";
    width: 100%;
    height: 1px;
    background-color: #e4e4e4;
    transform: scaleY(0.5);
    transform-origin: 0 0;
  }
  .community-box {
    padding: 14px 0;
    border-top: 0;
    font-size: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    .mod-user {
      padding: 0;
      display: flex;
      align-items: center;
      .mod-user-avatar {
        position: relative;
        margin-right: 8px;
        width: 36px;
        height: 36px;
        display: block;
        border-radius: 50%;
        overflow: hidden;
        padding: 0;
        background-color: transparent;
        box-sizing: border-box;
        overflow: visible;
        img {
          width: 100%;
          height: 100%;
          display: block;
          object-fit: cover;
          border-radius: 50%;
        }
      }
      .mod-user-info {
        min-width: 0;
        flex: 1;
        .mod-user-name {
          font-size: 15px;
          font-weight: bold;
          line-height: 1.6;
          white-space: nowrap;
          text-overflow: ellipsis;
          width: 100%;
          overflow: hidden;
          text-align: left;
        }
        .mod-user-txt {
          color: #999;
          font-size: 12px;
          display: flex;
          align-items: center;
          .count-col {
            color: #999 !important;
            margin: 0;
          }
          .count-col:not(:first-child) {
            margin-left: 11px;
          }
          .count-col:not(:first-child) {
            display: inline-flex;
            align-items: center;
            margin-left: 11px;
          }
        }
      }
      .mod-user-btn {
        position: relative;
        min-width: 55px;
        color: #fff;
        font-size: 13px;
        text-align: center;
        line-height: 1.1;
        display: inline-flex;
        justify-content: center;
        padding: 4px 9px;
        margin-left: 6px;
        background: #f84848;
        border-radius: 11px;
        box-sizing: border-box;
      }
      .mod-user-btn.disabled {
        color: #ccc;
        background: #f8f8f8;
      }
    }
    .community-span {
      display: flex;
      text-align: left;
      flex-direction: column;
      font-size: 15px;
      color: #333333;
      padding: 15px 0 10px;
      word-break: break-all;
      line-height: 24px;
      .ellipsis-container {
        text-align: left;
        line-height: 1.5;
      }
    }
    .community-listbox {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      margin-left: -2px;
      .community-imgboxes {
        flex-shrink: 0;
        width: 113px;
        height: 113px;
        margin-left: 2px;
        margin-bottom: 2px;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .community-imgboxes:only-child {
        width: 228px;
        height: 228px;
      }
    }
    .cm-counter {
      margin-top: 10px;
      display: flex;
      .cm-counter-col {
        color: #999;
        font-size: 12px;
        display: inline-flex;
        align-items: center;
        &::before {
          content: "";
          background: #d8d8d8;
          width: 2px;
          height: 2px;
          margin-right: 6px;
          display: inline-block;
          border-radius: 50%;
        }
      }
      .cm-counter-col + .cm-counter-col {
        margin-left: 6px;
      }
    }
  }
}
</style>
